<template>
	<view style="height: 100vh;" :style="{'fontFamily':themeColor.typeface,'color':themeColor.main_font_color}">
		<u-sticky offset-top="0">
			<nuoyu-header :title="businessName"></nuoyu-header>
		</u-sticky>
		
		<!-- <view class="title" :style="'background-color:'+themeColor.main_color">
			商品分类
		</view> -->
		
		
		<!-- 商品区域 -->
		<view class="nuoyu-index" v-if="goodsList.length > 0">
			 
			<view class="nuoyu-goods">
				<view @click="goGoods(item)" class="nuoyu-goods-item" v-for="(item,index) in goodsList" :key="index">
					<view class="label" :style="'--main-bg-color:'+themeColor.main_color">{{ item.paypal_type | getPaypalType }}</view>
					<view class="Image">
						<image style="height: 100%;width: 100%;" :src="item.previewUrl" mode="aspectFill"></image>
					</view>
					<view class="goodsDes">
						<view class="title">
							<view> 
								<span style="padding-right: 10rpx;">
									<span style="font-size: 16rpx;color: white;padding: 8rpx 8rpx 8rpx 8rpx;border-radius: 8rpx;position: relative;bottom: 6rpx;" :style="{'background':themeColor.main_color}">
										<span style="position: relative;bottom: 2rpx;">活动</span>
									</span>
								</span>
								<span style="">{{item.goodsName}}</span>
							</view>
						</view>
						<view v-if="item.rewardIntegral >0" class="rewardIntegral" :style="'--main-bg-color:'+themeColor.assist_color">
							<span>下单赠送积分</span>
							<span>{{item.rewardIntegral}}</span>
						</view>
						<view class="goodsPrice" style="display: flex;justify-content: space-between;"> 
							<view class="goodsPrice">
								<view :style="{'color':themeColor.main_color,'fontSize':'38rpx'}">
									￥{{ item.goodsPrice }}
								</view>
								<view v-if="item.scribePrice" :style="{'color':themeColor.font_assist,'fontSize':'24rpx','position':'relative','top':'15rpx','left':'10rpx'}">
									<text style="text-decoration: line-through;" >￥{{item.scribePrice}}</text>
								</view>
							</view>
							<!-- <view>
								<view :style="{'color':themeColor.font_assist,'fontSize':'24rpx','position':'relative','top':'15rpx'}">
									<text>销量20</text>
								</view>
							</view> -->
						</view>
						
					</view>
				</view>
			</view>
			<!-- <view style="text-align: center;">加载中...</view> -->
			<!-- <view style="height: 130rpx;"></view> -->
		</view>
		
		<view v-else style="position: relative;top: 35%;">
			<u-empty
			        mode="message"
			        icon="https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/test/1738749101_空数据.png"
			>
			</u-empty>
		</view>
		
	</view>
</template>

<script>

	export default{

		data(){
			return{
				businessName:'',
				themeColor:"",
				screenWidth:0,
				screenHeight:0,
				businessId:'',
				goodsList:[],
				wechatConfig:''
			}
		},
		
		onLoad(options) {
			const info = uni.getSystemInfoSync();
			this.themeColor = this.$store.state.themeConfig || uni.getStorageSync('themeConfig')
			this.wechatConfig = this.$store.state.wechatConfig ||  uni.getStorageSync('wechatConfig')
			this.screenHeight = info.screenHeight;
			this.screenWidth = info.screenWidth
		 
			let that = this
			if(options.businessId){
				this.businessName = options.businessName
				this.businessId = options.businessId
				setTimeout(()=>{
					this.getGoodsList(options.businessId);
				},500)
			}
		},
		filters:{
			//点击商品
			clickItem(e) {
				console.log('所点击商品信息:', e)
			},
			// 1微信支付、2支付宝支付、3余额支付、4月卡支付，5.微信,余额,支付宝，6.全部
			getPaypalType(value){
				if(value == 1){
					return '商品'
				}
				if(value == 2){
					return '商品'
				}
				if(value == 3){
					return '余额'
				}
				if(value == 4){
					return '月卡'
				}
				if(value == 5){
					return '活动'
				}
				if(value == 6){
					return '活动'
				}
			}
		},
		methods:{
			goGoods(item){
				uni.navigateTo({
					url:`/pages/goods/goodsDetails?goods_id=${item.goods_id}`
				})
			},
			getGoodsList(businessId){
				this.tui.request("/basic-capi/goods/getGoods", "get",
				{
					businessId:businessId,
					pageSize:50,
					pageNum:1
				}
				 ).then(res=>{
					if(res.code == 200){
						this.goodsList = res.data.list
						this.goodsList.forEach((item)=>{
							item.previewUrl = this.wechatConfig.tencent‌Domain + item.previewUrl
						})
					} 
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	 
	 .nuoyu-index{
	 	background: white;
		margin-top: 70rpx;
	 }
	 .nuoyu-index-header{
	 	background-color: var(--main-bg-color);
	 	width: 100%;
	 	height: 305rpx;
	 	color: white;
	 	font-size: 22rpx;
	 	position: relative;
	 	// padding: 20rpx;
	 	// width: 100%;
	 }
	 .nuoyu-index-header-H5{
	 	background-color: var(--main-bg-color);
	 	width: 100%;
	 	height: 240rpx;
	 	color: white;
	 	font-size: 22rpx;
	 	// padding: 20rpx;
	 	// width: 100%;
	 }
	 .nuoyu-index-header-item{
	 	padding: 20rpx;
	 	display: flex;
	 	gap: 20rpx;
	 	.font-text{
	 		display: flex;
	 		align-items: center;
	 		gap: 5rpx;
	 	}
	 	display: flex;
	 	align-items: center;
	 }
	 .nuoyu-index-header-swiper{
	 	padding: 10rpx 20rpx;
	 	position: relative;
	 	bottom: 120rpx;
	 	height: 30rpx;
	 	
	 }
	 .nuoyu-index-tag{
	 	background: white;
	 	padding: 20rpx;
	 	margin-top: 100rpx;
	 	display: grid;
	 	grid-template-columns: repeat(4, 1fr);
	 	// grid-auto-rows: 200rpx;
	 	gap: 20rpx;
	 	color: #00000099;
	 }
	 .nuoyu-index-tag-content{
	 	padding: 20rpx;
	 	display: flex;
	 	flex-direction: column;
	 	justify-content: center;
	 	align-items: center;
	 }
	 .nuoyu-index-tag-text{
	 	font-size: 22rpx;
	 }
	 .nuoyu-header{
	 	background: #fff;
	 	margin:20rpx 20rpx;
	 	padding: 15px 10px 0 0px;
	 	.nuoyu-header-text{
	 		// padding: 15px 10px 0 20px;
	 		// height: 40rpx;
	 		padding-left: 10px;
	 		border-left: 6rpx solid var(--main-bg-color);
	 	}
	 }
	 .nuoyu-goods{
	 	// display: grid;
	 	// grid-template-columns: repeat(2, 1fr);
	 	grid-gap: 10rpx;
	 	padding: 20rpx;
	 	column-count: 2; /* 设置列数 */
	 	
	 	// column-gap: 10rpx; /* 设置列间距 */
	 	.nuoyu-goods-item{
	 		break-inside: avoid;
	 		margin-bottom: 10rpx;
	 		
	 		// background-color: #f2f2f2;
	 		border: 1px solid #ccc;
	 		border-radius: 5px;
	 		// padding: 6px;
	 		// box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
	 		position: relative;
	 		
	 		max-height: 600rpx;
	 		.label{
	 			position: absolute;
	 			font-size: 16rpx;
	 			// box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.4);
	 			color: white;
	 			// background-color:rgba(255,255,255,0.8);   // 透明背景
	 			padding: 6rpx 16rpx;
	 			border-radius: 6rpx;
	 			z-index: 9;
	 			background-color: var(--main-bg-color);
	 		}
	 		.Image{
	 			padding: 6px;
	 			// height: 200rpx;
	 			width: 94%;
	 			
	 			height: 300rpx;
	 			// min-width: 400rpx;
	 			
	 			
	 		}
	 		.goodsDes{
	 			padding: 16rpx 6px;
	 			display: flex;
	 			flex-direction: column;
	 			gap: 10rpx;
	 			.title{
	 				display: -webkit-box;
	 				gap: 10rpx;
	 				width: 100%;
	 				-webkit-line-clamp: 2;
	 				-webkit-box-orient: vertical;
	 				overflow: hidden;
	 				text-overflow: ellipsis;
	 				white-space: normal;
	 			}
	 			.goodsPrice{
	 				display: flex;
	 		 
	 			}
	 			
	 			.rewardIntegral{
	 				width: 160rpx;
	 				text-align: center;
	 				font-size: 16rpx;
	 				color: var(--main-bg-color);;
	 				padding: 6rpx 0rpx;
	 				border-radius: 6rpx;
	 				z-index: 9;
	 				border:1px solid var(--main-bg-color);
	 			}
	 		}
	 	}
	  
	 }
	 
</style>